<template>
  <div class="location" ref="loc">
      <div class="city_search">
         <div class="cancel" @click="back"><i class="el-icon-close"></i></div>
         <div class="input" @click="search"><i class="el-icon-search search"></i><span>请输入城市名</span></div>
      </div>
      <!-- 当前选择城市 -->
    <div  class="scroller_wrapper">
          <Scroller ref="toScrollTop">
            <div> 
                <div class="current_city">当前城市：<span v-if="currentCity.nm">{{currentCity.nm}}</span><span v-else></span></div>
              <!-- 定位 -->
                <div class="gps_loction" @tap="checkLocationCity">
                    <i class="el-icon-location icon"></i>
                    <span class="location_city">{{locationCity.nm}}</span>
                    <span class="location_gps_title" v-show="locationCity.nm">GPS定位</span>
                </div>
                <!-- 热门城市 -->
                <div class="hot_city">
                    <div class="hot_city_title">热门城市</div>
                    <div class="hot_city_list">
                        <span v-for="item in hostList" :key="item.id">{{item.nm}}</span>
                    </div>
                </div>
                <!-- 所有城市 -->
                <div class="city_list" v-for="item in cityList" :key="item.index">
                    <div class="city_title" ref="title">{{item.index}}</div>
                    <div class="city_item">
                        <div v-for="cities in item.list" :key="cities.id" @tap="checkCity(cities)">{{cities.nm}}</div>
                    </div>
                </div>
            </div>
          </Scroller>
            <!-- 侧边选择 -->
          <div class="side">
              <div class="index_item" v-for="(item,index) in cityList" :key="item.index" @click="choseIndex(index)">{{item.index}}</div>
          </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data () {
    return {
      msg:'',
      searchList:[],
      locationCity:{},
      cityList: '',
      hostList: '',
    }
  },
  computed: {
    ...mapState(['currentCity'])
  },
  mounted () {
    // 获取当前定位
    this.axios('/api/getLocation').then(res => {
        this.locationCity = res.data.data
    })
    // 获取城市列表
    if( window.localStorage.getItem('cityList') === null || window.localStorage.getItem('hostList') === null ){
         
          this.axios.get('/api/cityList').then((res) => {
            if (res.data.msg === 'ok') {
              let cities = res.data.data.cities
              let data = this.filterCity(cities)
              this.cityList = data.cityList ;
              this.hostList = data.hostList;
              // this.$store.commit('getCityList',data)
              window.localStorage.setItem('cityListit',JSON.stringify(data.cityList));
              window.localStorage.setItem('hostList',JSON.stringify(data.hostList));
          }
        })
    } else {
          
          this.cityList = JSON.parse(window.localStorage.getItem('cityList'));
          this.hostList = JSON.parse(window.localStorage.getItem('hostList'));
    }
  },
  methods: {
    // 按字母排序分组
    filterCity (cities) {
      var cityList = []
      var hostList = []
      for (let i = 0; i < cities.length; i++) {
        var firstWord = cities[i].py[0].toUpperCase()
        // 添加热门城市
        if (cities[i].isHot === 1) {
          hostList.push({ nm: cities[i].nm, id: cities[i].id })
        }

        if (filterName(firstWord).state) { // 按字母分类添加
          cityList.push({ index: firstWord, list: [ { nm: cities[i].nm, id: cities[i].id } ] })
        } else { // 存在新增
          cityList[filterName(firstWord).index].list.push({ nm: cities[i].nm, id: cities[i].id })
        }
      }

      // 判断是否存在函数
      function filterName (firstWord) {
        for (let i = 0; i < cityList.length; i++) {
          if (cityList[i].index === firstWord) { return { index: i, state: false } }
        }
        return { index: '', state: true }
      }

      cityList.sort((a, b) => {
        if (a.index > b.index) {
          return 1
        }
        if (a.index < b.index) {
          return -1
        } else {
          return 0
        }
      })

      return { cityList, hostList }
    },

    back() {
      this.$router.back();
    },
    // 侧边选择
    choseIndex (index) {
      
      // this.$refs.loc.scrollTop = this.$refs.title[index].offsetTop;
      this.$refs.toScrollTop.toScrollTop(-this.$refs.title[index].offsetTop,300);

    },
    // 选择定位城市
    checkLocationCity() {
        if(this.locationCity.nm) {
          this.$store.commit('getCurrentCity',this.locationCity)
          this.$router.push('/home/film/nowplaying');
        }
    },
    // 选择城市
    checkCity (cities) {
      this.$store.commit('getCurrentCity',cities);
      this.$router.back()
    },
    // 查询路由
    search() {
      this.$router.push('/citySearch')
    }
  }
}
</script>
<style scoped>
    .location{width: 100%;background-color: #fff;height: 100%;display: flex;flex-direction: column;}
    .city_search{width: 100%;height: 45px;position: relative;display: flex;flex-direction: row;padding: 10px 15px;background-color:#e54847;color: #fff;}
    .cancel{margin-right: 15px;font-size: 20px}
    .input{width: 100%;border-radius: 20px;background-color: #fff;padding: 2px;margin-right: 10px}
    .input span{height: 100%;;font-size: 13px;color: #999;line-height:100%; }
    .search{color: #999;margin: 0 5px}


    .current_city{padding: 20px 15px;font-size: 13px;color: #999;border-bottom: 10px solid #f5f5f5}
    .current_city span{font-size: 13px;color: #333}
    .gps_loction{padding: 20px 15px;}
    .icon{color: #F03D37;margin-right:8px}
    .location_city{color: #000;font-size: 15px;font-weight:500}
    .location_gps_title {color: #999;font-size: 13px;padding-left: 8px;font-weight:500}


    
    .hot_city,.city_list{ width: 100% }
    .hot_city_title{font-size: 14px;font-weight:500;color: #999;padding: 20px 0 0 15px;}
    .city_title{ color:#000;font-size: 16px;line-height: 30px;background-color: #f5f5f5;padding: 0 15px}
    .hot_city_list{padding:10px 5px 10px 10px;display: flex; flex-direction: row;flex-wrap: wrap;justify-content: space-between}
    .hot_city_list span{width: 29%;padding: 5px 25px;margin:5px;font-size: 14px;color: #3F3F3F;text-align: center;border: 1px solid #E8E8E8;border-radius: 3px;}

    .city_item{padding: 10px 15px}
    .city_item div:last-of-type{border: none}
    .city_item div {font-size: 14px;color:#3F3F3F;padding: 8px 0;border-bottom: 1px solid #eee}

    .scroller_wrapper{display: flex;flex-direction: row;height: 100%;overflow: auto;align-items: center;}
    .side{width: 6%;background-color: #fff;}
    .index_item{text-align: center;padding: 2px 0;font-size: 14px;color: #3F3F3F}
</style>
